<template>
<div class="text">
   <div id="charts">
  <div id="main" @click="jumpto"></div>
 </div>
</div>
</template>

<script>
var echarts = require('echarts')
// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts')
// 引入柱状图
require('echarts/lib/chart/bar')
// 引入提示框和标题组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
export default {
  name: 'bank',
  data () {
    return {
      pieData: [
        {value: 400, name: '搜索引擎'},
        {value: 335, name: '直接访问'},
        {value: 310, name: '邮件营销'},
        {value: 274, name: '联盟广告'},
        {value: 235, name: '视频广告'}],
      barData: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
      barDataNum: [5, 20, 36, 10, 10, 20]
    }
  },
  mounted () {
    /* ECharts图表 */
    var myChart = echarts.init(document.getElementById('main'))
    myChart.setOption({
      series: [
        {
          name: '销量',
          type: 'bar',
          // radius: '55%',
          // itemStyle: {
          //   normal: {
          //     // 阴影的大小
          //     shadowBlur: 200,
          //     // 阴影水平方向上的偏移
          //     shadowOffsetX: 0,
          //     // 阴影垂直方向上的偏移
          //     shadowOffsetY: 0,
          //     // 阴影颜色
          //     shadowColor: 'rgba(0, 0, 0, 0.5)'
          //   }
          // },
          data: this.barDataNum
        }
      ],
      xAxis: {
        data: this.barData
      },
      yAxis: {}
    })
  },
  methods: {
    jumpto () {
      this.$router.push({path: '/login'})
    }
  }

}
</script>

<style>
#charts{
width: 500px;
height: 500px;
}
</style>
